import React, { Suspense } from 'react';
import { ConfigProvider, Spin } from 'antd';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import zhCN from 'antd/locale/zh_CN';
import { store, persistor } from './store';
import { routes } from './routes';
import AIChat from './components/AIChat';
import './App.css';

const App: React.FC = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <ConfigProvider
          locale={zhCN}
          theme={{
            token: {
              colorPrimary: '#1890ff',
              colorBgContainer: '#f0f5ff',
              borderRadius: 8,
            },
          }}
        >
          <BrowserRouter>
            <Suspense fallback={<Spin size="large" className="global-spin" />}>
              <>
                <Routes>
                  {routes.map((route) => (
                    <Route
                      key={route.path}
                      path={route.path}
                      element={route.element}
                    />
                  ))}
                  <Route path="*" element={<Navigate to="/" replace />} />
                </Routes>
                <AIChat />
              </>
            </Suspense>
          </BrowserRouter>
        </ConfigProvider>
      </PersistGate>
    </Provider>
  );
};

export default App; 